<template>
	<view class="login-content">
			<view class="top">
				<view style="display: flex;transform: translate3d(-42% , 20px , 0);">
					<image src="../../static/logo.png" style="width: 40px;height: 40px;"></image>
					<view style="font-size: 27px;color: #ccc;">华能大连电厂</view>
				</view>
				
				<h1 class="login_h1">欢迎登录<br />火电巡检系统</h1>
				<view class="login_tip"></view>
			</view>
		<view class="login-body" style="text-align: center;width: 80%;">
			<view>
				<view class="login_id_psd">账户</view>
				<view class="login_input">
					<uni-icons type="person" class="icon_user"></uni-icons>
					<input placeholder="输入账户" v-model="accountName" style="width: 100%;"></input>
				</view>
			</view>
			<view>
				<view class="login_id_psd">密码</view>
				<view class="login_input">
					<uni-icons type="locked" class="icon_user"></uni-icons>
					<input placeholder="请输入密码" type="password" data="passwordtype" v-model="password"
						style="width: 100%;"></input>
				</view>
			</view>
			<button class="login_btn" type="primary" @click="login">登录</button>
		</view>
	</view>
</template>
<script>
import request from '../../common/request'

import {
	mapMutations
} from 'vuex'
export default {
	data() {
		return {
			accountName: "",
			password: "",
		}
	},
	mounted(){
		let userInfo = uni.getStorageSync('userInfo')
		console.log(userInfo)
		console.log(uni.getStorageSync('roleId'))
		if(userInfo != ""){
			if(userInfo.role == 3){
				console.log('编辑者登录！')
				uni.setStorageSync("roleId" , 1)
				uni.switchTab({
					url:"/pages/home/index",
				})
			}else{
				console.log("管理员登录")
				uni.setStorageSync("roleId" , 0)
				uni.switchTab({
					url:"/pages/taskManage/index",
				})
			}
		}
	},
	methods: {
		login() {
			console.log("登录")
			if (this.accountName !== "" && this.password !== "") {
				request('/users/account/login', 'POST', {},{
					username: this.accountName,
					password: this.password
				}).then(req => {
					console.log(req)
					if (req.data.code === 0) {
						console.log(req)
						console.log("登录成功")
						// 登录成功后保存用户信息
						let userInfo = req.data.data
						uni.setStorageSync('userInfo', userInfo);
						console.log(userInfo)
						if(userInfo.role == 3){
							uni.setStorageSync("roleId" , 1)
							getApp().globalData.roleId = 1
							console.log("roleId="+uni.getStorageSync("roleId"))
							uni.switchTab({
								url:"/pages/home/index",
							})
							uni.setTabBarItem({
								index: 0,
								visible: true
							})
							uni.setTabBarItem({
								index: 1,
								visible: true
							})
							uni.setTabBarItem({
								index: 2,
								visible: false
							})
							uni.setTabBarItem({
								index: 3 ,
								visible: false
							})

						}else{
							uni.setStorageSync("roleId" , 0)
							getApp().globalData.roleId = 0
							console.log("roleId="+uni.getStorageSync("roleId"))
							uni.switchTab({
								url:"/pages/taskManage/index",
							})
							uni.setTabBarItem({
								index: 0,
								visible: false
							})
							uni.setTabBarItem({
								index: 1,
								visible: false
							})
							uni.setTabBarItem({
								index: 2,
								visible: true
							})
							uni.setTabBarItem({
								index: 3 ,
								visible: true
							})
						}
					} else {
						console.log("账户名或密码错误")
						uni.showToast({
							title:"账户名或密码错误",
							icon:"none"
						})
					}
				})
			} else{
				console.log("账户或密码为空")
				uni.showToast({
					title:"账户或密码不能为空",
					icon:"none"
				})
			}
				
		},
		findPsd(){
			uni.navigateTo({
				url: '/pages/users/findPsd'
			})
		}

	},
}
</script>

<style scoped lang="scss">
	.login-content {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		background-color: #f5f5f5;
		height: 100vh;
		overflow: hidden;
	}
	.top{
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 200%;
		color:#fff;
		// border-bottom-left-radius: 60px; /* 左下角弧形 */
		// border-bottom-right-radius: 60px; /* 右下角弧形 */
		// border-bottom: 2px solid #000; /* 下边框 */
		background-color: #0A60BD;
		// border-radius: 0  0 20px 20px;
		border-radius:  0 0 50% 50%;
	}
	.login_h1 {

		margin-top: 100px;
	}

	.login_tip {
		text-align: center;
		font-size: 14px;
		color: gray;
		margin-bottom: 70px;
		margin-top: 10px;
	}

	.login_id_psd {
		margin-top: 40px;
		text-align: left;
		margin-bottom: 5px;
	}

	.login_input {
		display: flex;
		flex-direction: row;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		text-align: left;
		padding-left: 10px;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);
		border: 1px solid #EBF2FF;
		align-items: center;
	}

	.icon_user {
		margin-right: 10px;
	}

	.login__toFind {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		margin: 10px;
		font-size: 12px;

	}

	.login_btn {
		border-radius: 15px;
		margin-top: 50px;
	}
</style>